<script setup lang='ts'>
import { useInsertSysUser } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import Seletct from './select.vue'

const { isPending: insertUserLoading, mutate: insertUserMutate } = useInsertSysUser()

const id = defineModel<any>('id')

const visible = defineModel<boolean>('visible', { required: true })

const treeData = defineModel<any>('treeData')

const maxLength = defineModel<any>('maxLength')

const selectVisible = ref<boolean>(false)

const dialog = '新增人员'

const formRef = ref()

const initialState = {
    personbm: '',
    personcsrq: '',
    personryzt: '',
    personsjhm: '',
    personxb: '',
    personxm: '',
    personxssx: 1,
    personzjhm: '',
    personzjlx: '',
}
const state = ref<any>(
    cloneDeep(initialState),
)

const columns = computed<any[]>(() => {
    return [
        {
            colProps: {
                span: 24,
            },
            fieldProps: {
                filterable: true,
                props: {
                    checkStrictly: true,
                    children: 'childs',
                    emitPath: false,
                    label: 'orgName',
                    value: 'orgCode',
                },
                showAllLevels: false,
            },
            label: '所属组织',
            options: treeData,
            prop: 'personsszz',
            valueType: 'cascader',
        },
        {
            colProps: {
                span: 12,
            },
            label: '姓名',
            prop: 'personxm',
        },
        {
            colProps: {
                span: 12,
            },
            label: '性别',
            options: [
                {
                    label: '男',
                    value: '男',
                },
                {
                    label: '女',
                    value: '女',
                },
            ],
            prop: 'personxb',
            valueType: 'select',
        },
        {
            colProps: {
                span: 12,
            },
            label: '手机号码',
            prop: 'personsjhm',
        },
        {
            colProps: {
                span: 12,
            },
            fieldProps: {
                type: 'date',
                valueFormat: 'YYYY-MM-DD',
            },
            label: '出生日期',
            prop: 'personcsrq',
            valueType: 'date-picker',
        },
        {
            colProps: {
                span: 12,
            },
            label: '证件类型',
            options: [
                {
                    label: '身份证',
                    value: '身份证',
                },
            ],
            prop: 'personzjlx',
            valueType: 'select',
        },
        {
            colProps: {
                span: 12,
            },
            label: '证件号码',
            prop: 'personzjhm',
        },
        {
            colProps: {
                span: 12,
            },
            fieldProps: { max: maxLength.value + 1, min: 1, precision: 0, step: 1 },
            label: '显示顺序',
            prop: 'personxssx',
            valueType: 'input-number',
        },
        {
            colProps: {
                span: 12,
            },
            label: '人员状态',
            options: [
                {
                    label: '启用',
                    value: '启用',
                },
                {
                    label: '停用',
                    value: '停用',
                },
            ],
            prop: 'personryzt',
            valueType: 'select',
        },
        {
            colProps: {
                span: 12,
            },
            label: '人员编号',
            prop: 'personbm',
            valueType: 'text',
        },
    ]
})

const rules = {
    personcsrq: [
        {
            message: '请选择出生日期',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personryzt: [
        {
            message: '请选择人员状态',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personsjhm: [
        {
            message: '请输入手机号码',
            required: true,
            trigger: ['blur', 'change'],
        },
        { message: '手机号码格式不正确', pattern: /^1[3-9]\d{9}$/, trigger: 'blur' },
    ],
    personsszz: [
        {
            message: '请选择所属组织',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personxb: [{
        message: '请选择性别',
        required: true,
        trigger: ['blur', 'change'],
    }],
    personxm: [
        {
            message: '请输入姓名',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personxssx: [
        {
            message: '请输入显示顺序',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
    personzjhm: [
        {
            message: '请输入证件号码',
            required: true,
            trigger: ['blur', 'change'],
        },
        { message: '证件号码格式不正确', pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/i, trigger: 'blur' },
    ],
    personzjlx: [
        {
            message: '请选择证件类型',
            required: true,
            trigger: ['blur', 'change'],
        },
    ],
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    formRef.value.formInstance.resetFields()
    state.value = cloneDeep(initialState)
}

function showSelect() {
    selectVisible.value = true
}

function transfer(val: any) {
    const { personsszz, personsszzname, ...rest } = val
    const params = {
        ...rest,
        personsszz: state.value.personsszz,
    }
    state.value = cloneDeep(params)
}

async function confirm() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            ...state.value,
            whcjsource: state.value?.whcjpersonid ? '1' : '2',
        }
        insertUserMutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="130"
                  :has-footer="false"
                  :rules="rules"
                  label-position="top"
                  class="max-h-600 overflow-x-hidden overflow-y-auto"
                  :row-props="{ gutter: 20 }"
        >
            <template #plus-field-personxm>
                <div class="flex gap-10 w-full">
                    <el-input v-model="state.personxm"
                              class="flex-1"
                              placeholder="请输入"
                              clearable
                    />

                    <el-button type="primary"
                               @click="showSelect"
                    >
                        选择
                    </el-button>
                </div>
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="insertUserLoading"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>

    <Seletct v-model:visible="selectVisible"
             @transfer="transfer"
    />
</template>
